<script setup>
import { ref } from 'vue'
import { editOderService } from '@/api/borrowOrder.js'
const dialogVisible = ref(false)
const formRef = ref()

const formModel = ref({
  kkey: '',
  key: '',
  id: ''
})

const rules = {
  kkey: [
    {
      validator: (rule, value, callback) => {
        // 判断 value 和 当前 form 中收集的 password 是否一致
        if (value !== formModel.value.key) {
          callback(new Error('密钥错误'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

const emit = defineEmits(['success'])

const onsubmit = async () => {
  await formRef.value.validate()
  await editOderService(formModel.value.id, '待还书')
  ElMessage.success('已借阅')
  dialogVisible.value = false
  emit('success')
}

// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {
  dialogVisible.value = true
  formModel.value.id = row.id
  formModel.value.key = row.kkey
}
// 向外暴露方法
defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="'确认密钥'" width="30%">
    <el-form
      ref="formRef"
      label-width="100px"
      style="padding-right: 30px"
      :rules="rules"
      :model="formModel"
    >
      <el-form-item label="密钥" prop="kkey">
        <el-input v-model="formModel.kkey" placeholder="请输入密钥"></el-input>
      </el-form-item>
      <el-form-item><el-button @click="onsubmit">确认</el-button></el-form-item>
    </el-form>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
